﻿<template>
  <div>
    <!-- 使用 @click 监听点击事件 -->
    <button @click="incrementCount">Add 1</button>
    <p>Count is: {{ count }}</p>

    <!-- 方法事件处理器：调用 greet 方法 -->
    <button @click="greet">Greet</button>

    <!-- 使用修饰符阻止默认行为 -->
    <form @submit.prevent="onSubmit">
      <button type="submit">Submit</button>
    </form>

    <!-- 使用按键修饰符监听键盘事件 -->
    <input @keyup.enter="onEnterPress" placeholder="Press Enter" />

    <!-- 使用系统按键修饰符 -->
    <div @click.ctrl="doSomethingOnCtrlClick">Ctrl+Click on me</div>

    <!-- 使用 .exact 修饰符 -->
    <button @click.ctrl.exact="onCtrlClick">Ctrl+Click (exact)</button>

    <!-- 使用鼠标按键修饰符 -->
    <div @click.right="onRightClick">Right Click on me</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      name: 'Vue.js'
    }
  },
  methods: {
    // 方法事件处理器示例
    incrementCount() {
      this.count++;
    },
    // 弹出问候
    greet(event) {
      alert(`Hello ${this.name}!`);
      if (event) {
        alert(event.target.tagName);
      }
    },
    // 表单提交处理
    onSubmit() {
      alert('Form submitted!');
    },
    // Enter键被按下
    onEnterPress() {
      alert('Enter Pressed!');
    },
    // 处理 Ctrl+Click
    doSomethingOnCtrlClick() {
      alert('Ctrl+Click detected!');
    },
    // 只有当仅按下Ctrl时
    onCtrlClick() {
      alert('Exact Ctrl+Click detected!');
    },
    // 右键点击
    onRightClick() {
      alert('Right Click detected!');
    }
  }
}
</script>
